<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8">
        <title>D3 Test</title>
        <script type="text/javascript" src="d3/d3.v3.js"></script>
        <!--<script src="http://d3js.org/d3.v3.min.js"></script>-->
<!--
        <script src="d3/d3.parcoords.js"></script>
        <link rel="stylesheet" type="text/css" href="css/d3.parcoords.css">
-->
		<style type="text/css">
		
			div.bar {
				display: inline-block;
				width: 20px;
				height: 75px;	/* Gets overriden by D3-assigned height below */
				margin-right: 2px;
				background-color: teal;
			}
		
		</style>
    </head>
    <body>


        <script type="text/javascript">
//Width and height
var w = 500;
var h = 100;
var barPadding = 1;  // <-- New!
var dataset = [ 5, 10, 13, 19, 21, 25, 22, 18, 15, 13,
                11, 12, 15, 20, 18, 17, 16, 18, 23, 25 ];
//Create SVG element
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
svg.selectAll("rect")
   .data(dataset)
   .enter()
   .append("rect")
   .attr("x", function(d, i) {
      return i * (w / dataset.length);
   })
   .attr("y", function(d){
	  return h-d*4;
   })
   .attr("width", w / dataset.length - barPadding)
   .attr("height", function(d){
	  return d*4;
   })
   .attr("fill", function(d) {
       return "rgb(0, 0, " + (d * 10) + ")";
   });
svg.selectAll("text")
   .data(dataset)
   .enter()
   .append("text")
   .text(function(d) {
        return d;
   })
   .attr("x", function(d, i) {
    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
    })
   .attr("y", function(d) {
        return h - (d * 4)+15;
   })
   .attr("font-family", "sans-serif")
   .attr("font-size", "11px")
   .attr("fill", "white")
   .attr("text-anchor", "middle");
        </script>
    </body>
</html> 